iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 2

【Day2】VsCode相關套件安裝及建立React專案和React的小小介紹!!

  • 分享至 

  • xImage
  •  

上一篇有提到說,這次使用的IDE是超級好用的VsCode,相信各位看官們也都下載好了

安裝完畢,打開後會長這樣 ↓

紅色的圈圈點下去就是可以下載套件的地方了


VsCode 可以下載很多套件,那小菜鳥這邊就介紹幾個好用而且常用到的套件!

首先,如果覺得原文看起來很吃力的話,VsCode很貼心地幫我們準備了中文版套件

  1. 中文版

  2. HTML CSS Support (用來幫助我們更快找到id,class...等)

  3. IntelliSense for Css class names in HTML
    (用來幫助我們在HTML裡面更快找到CSS的class)

  4. JS JSX Snippets (支援JS的JSX語法)

  5. JS-CSS-HTML Formatter (幫助JS,CSS,HTML格式化)


React和其他兩個前端框架的小小比較/創建React專案

套件都安裝完了,來講講我們React的起源吧,

React的起源是來自FB,像是現在各位用的IG網站就是使用React來開發的,

React的優點是高效能高效率,適合用於數據不斷變化的大型應用程式,

React是透過Component(組件)和單向數據流來開發的

如果說拿Vue,Angular,React來做比較的話,React算是最近比較流行的前端框架,

雖然說Vue也是個大宗(原因是因為Vue的中文文檔非常完善,很容易上手),
Angular就相對難上手了..

這次介紹React的原因前面有提到是因為小菜鳥的公司是使用React

(但其實小菜鳥有自己偷偷學了Vue,等有機會的時候再來分享學習的結果)

現在來講一下,要創建一個React專案的方法!
(後面介紹到測試的時候,會用更快速的方法來創建React專案)

  • 先在所選擇的目錄下,執行npx create-react-app 專案名稱
npx create-react-app my-first-react-project
  • 執行npm start 來確認專案是否可以正常開啟

在建立react-app的時候,它會替我們安裝好React及React-Dom


creat-react-app在建立專案的時候替我們把基本react套件安裝完畢了!

下一篇就來開始我們的React吧!!


上一篇
【Day1】下載VsCode來開啟我們的前端測試不歸路吧(╬•᷅д•᷄╬)
下一篇
【Day3】React的基本結構與概念,地基打好才可以蓋房子R ʕ •̀ o •́ ʔ
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言